<!DOCTYPE html>
<html>

<head>
    <title>经销商申请</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="__PUBLIC__/libs/frozenui/css/frozen.css">
    <link rel="stylesheet" href="__PUBLIC__/Mobi/style.css">
    <script src="__PUBLIC__/Anal/js/jquery.js"></script>
</head>

<body>
    <div class="ui-poptips ui-poptips-success" id="alt" style="display:none;">
        <div class="ui-poptips-cnt"><i></i>温馨提示内容</div>
    </div>
    <div class="codetype">
        <ul class="ui-row" id="part">
            <li class="ui-col ui-col-50">经销商申请</li>
            <!--li class="ui-col ui-col-50" style="text-align:right;">23</li-->
        </ul>
    </div>
    <div class="ui-form ui-border-t">
        <form action="{:U('Sops/addmailname')}" method="post" onsubmit="return onoad();">
            <div class="ui-form-item ui-border-b">
                <label>姓名</label>
                <input type="text" name='ma_name' placeholder="请输入您的姓名." />
            </div>
            <div class="ui-form-item ui-border-b">
                <label>手机</label>
                <input type="text" name='ma_phone' placeholder="请输入您的11位电话号码." />
            </div>
            <div class="ui-form-item ui-border-b">
                <label>省份</label>
                <div class="ui-select">
                    <select name="ma_province" onchange="getcitys(this.value)">
                        <option value="请选择省份">请选择省份</option>
                        <volist name="pro" id="v">
                            <option value="{$v.ren_name}" name="{$v.ren_id}">{$v.ren_name}</option>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="ui-form-item ui-border-b">
                <label>城市</label>
                <div class="ui-select">
                    <select name="ma_city">
                        <option value="请选择城市">请选择城市</option>
                    </select>
                </div>
            </div>
            <div class="ui-form-item ui-border-b">
                <label>公司</label>
                <input type="text" name='ma_company' placeholder="请输入您的公司名称." />
            </div>
            <div class="ui-form-item" style="text-align: center;">
                <a href="http://www.yubao21.com/user_agreement.jpg">
                    推广用户协议
                </a>
            </div>
            <div class="ui-btn-wrap" style="text-align:center;">
                <button type="submit" class="ui-btn" id='btn1'>提交</button>
            </div>
        </form>
    </div>
    <script>
    function getcitys(vals) {
        var getid = $("select[name=ma_province] option[value=" + vals + "]").attr("name");
        $.post("{:U('Sops/getrenchild')}", { id: getid }, function(res) {
            var option = "<option value='请选择城市' selected>请选择城市</option>";
            for (var i = 0; i < res.length; i++) {
                option += "<option value='" + res[i]["ren_name"] + "'>" + res[i]["ren_name"] + "</option>";
            }
            $("select[name=ma_city]").html(option);
        });
    }

    function onoad() {
        var phone = $("input[name=ma_phone]").val();
        var reg = /^0?1[3|4|5|8][0-9]\d{8}$/;
        var name = $("input[name=ma_name]").val();
        var comp = $("input[name=ma_company]").val();
        if (name.length == 0) {
            $("#alt div").html("<i></i>姓名不能为空!");
            $("#alt").fadeToggle(300);
            $("#alt").fadeToggle(3000);
            return false;
        }
        if (phone.length == 0 || !reg.test(phone)) {
            $("#alt div").html("<i></i>手机号码错误!");
            $("#alt").fadeToggle(300);
            $("#alt").fadeToggle(3000);
            return false;
        }
        if (comp.length == 0) {
            $("#alt div").html("<i></i>请填写公司名称!");
            $("#alt").fadeToggle(300);
            $("#alt").fadeToggle(3000);
            return false;
        }

        return true;
    }
    </script>
</body>

</html>